<!DOCTYPE html>
<link rel="stylesheet" href="/assets/css/admin.css" />
<link rel="stylesheet" href="/assets/css/admin.dark.css" />
<link rel="stylesheet" href="/pear/css/pear.css" />
<div style="padding: 16px;">
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="kb-table" lay-filter="kb-table"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-addition"></i>新增
        </button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>
<script type="text/html" id="barDemo">
    {{# if( d.id !== 1 ){ }}
    <button class="layui-btn layui-btn-xs" lay-event="more">
        更多<i class="layui-icon layui-icon-down"></i>
    </button>
    {{# }; }}
</script>
<script src="/layui/layui.js"></script>
<script src="/pear/pear.js"></script>
<script>

    const QUERY_URL = `{:route('admin.adminRoles.query')}`;
    const ADD_URL = `{:route('admin.adminRoles.add')}`;
    const EDIT_URL = `{:route('admin.adminRoles.edit')}`;
    const DEL_URL = `{:route('admin.adminRoles.del')}`;

    layui.use(['treeTable', "table", "common", "dropdown"], function () {
        let treeTable = layui.treeTable;
        let table = layui.table;
        let common = layui.common;
        let dropdown = layui.dropdown;


        let cols = [[
            { type: 'checkbox', fixed: 'left' },
            { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true },
            { field: 'name', title: '角色', fixed: 'left' },
            { field: 'create_time', title: '创建时间' },
            { field: 'update_time', title: '更新时间' },
            { fixed: 'right', title: '操作', minWidth: 85, toolbar: '#barDemo' }
        ]];

        // 创建渲染实例
        treeTable.render({
            elem: '#kb-table',
            url: QUERY_URL,
            method: 'post',
            toolbar: '#toolbarDemo',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'kb-refresh',
                icon: 'layui-icon-refresh'
            }, 'filter', 'exports', 'print',],
            cols: cols,
            cellMinWidth: 80,
            skin: "line",
            size: "lg",
            page: true
        });

        // 工具栏事件
        table.on('toolbar(kb-table)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'add':
                    common.open(ADD_URL, "新增")
                    break;
                case 'dels':
                    if (checkStatus.data.length) {
                        common.tableRemove(DEL_URL, { ids: checkStatus.data.map(v => v.id) })
                    } else {
                        layer.msg("请勾选数据")
                    }
                    break;
                case 'kb-refresh':
                    common.refreshTable("kb-table")
                    break;
            };
        });

        // 删除或编辑行事件
        table.on("tool(kb-table)", function (obj) {
            var that = this;
            var data = obj.data;
            if (obj.event === "more") {
                dropdown.render({
                    elem: that,
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '编辑',
                        id: 'edit'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (data, othis) {
                        if (data.id === 'del') {
                            common.tableRemove(DEL_URL, { ids: obj.data.id })
                        } else {
                            common.open(EDIT_URL + "?id=" + obj.data.id, "编辑")
                        }
                    }
                })
            }
        });
    });
</script>